<template>
	<view class="Lu-phone-box">
		<view class="Lu-phone-header">
			<p class="Lu-phone-tit1">欢迎回来！</p>
			<p class="Lu-phone-tit2">朋友</p>
		</view>
		<view class="Lu-phone-input">
			<view class="Lu-phone-tel clearfix">
				<view class="iconfont icon-tel Lu-phone-num fl">+86 <text class="iconfont icon-gengduo"></text></view>
				<view class="Lu-phone-number fl"><input type="number" v-model="phone" placeholder="输入手机号注册登录" placeholder-style="color:#999999"></view>
			</view>
		</view>
		<view class="Lu-phone-getcode" @click="navTo(phone)">获取验证码</view>
		<view class="Lu-phone-agree">注册即代表同意<text>《用户服务协议》</text></view>
		<view class="Lu-phone-footer">
			<view class="title">第三方登录</view>
			<view class="Lu-phone-weixin" @tap="wxlogin">
				<image class="Lu-phone-weixinimg" src="/static/image/weixin1.png"></image>
				<view class="Lu-phone-weixintit">微信</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin','userInfo','openId','apiUrl','pid'])
		},
		
		data() {
			return {
				phone:''
			}
		},
		onShow:function(){
		
		},
		onLoad() {
	
		},
		created () {
			console.log(this.apiUrl)
			// this.$store.commit('setOpenid', '111')
			console.log(this.openId)
		},
		methods: {
			navTo:function(phone) {
				uni.navigateTo({
					url: `/pages/apppersonal/getcode?phone=${phone}`
				})
			},
			wxlogin:function(){
				const _this = this
				uni.login({
					provider: 'weixin',
					success: function (loginRes) {
					console.log(loginRes);
					
					uni.getUserInfo({
						provider: 'weixin',
						success: function (infoRes) {
				            console.log(infoRes);
							const opneids = infoRes.userInfo.unionId
							const open_id = infoRes.userInfo.openId
							const unionId = infoRes.userInfo.unionId
							_this.$store.commit('setOpenid', opneids);
							uni.request({
								url:_this.apiUrl+'api/addUser',
								method:'POST',
								data:{
									openid:open_id,
									nickname:infoRes.userInfo.nickName,
									headImg:infoRes.userInfo.avatarUrl,
									pid:_this.pid,
									phone:_this.phone,
									unionid:unionId,
									type:2
								},
								success: (res) => {
									console.log(res)
									uni.request({
										url:_this.apiUrl+'api/userInfo',
										method:"POST",
										header:{
											openid:opneids
										},
										success: (res) => {
											console.log(res.data.data)
											// this.$store.commit('setToken', '1111');
											_this.$store.commit('login', res.data.data);
											// this.hasLogin = this.$store.state.hasLogin
											uni.switchTab({
											  url: '/pages/index/index'
											});
										}
									})
								}
							})
						}
					});
				  }
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.title{
		color: #666666;
		text-align: center;
		font-size: 24rpx;
	}
	
	.title:before,.title:after{
		content: "";
		width: 220rpx;
		border-top: 2rpx #999999 solid; 
		display: inline-block;
		vertical-align: middle;
	}
	.title:before{
		margin-right: 20rpx;
	}
	.title:after{
		margin-left: 20rpx;
	}
	.Lu-phone-box{
		padding: 0 50rpx;
		.Lu-phone-header{
			margin-top: 180rpx;
			.Lu-phone-tit1,.Lu-phone-tit2{
				font-size: 52rpx;
				font-weight: 600;
			}
			.Lu-phone-tit2{
				margin-top: 20rpx;
			}
		}
		.Lu-phone-input{
			margin-top: 80rpx;
			padding: 20rpx 0;
			border-bottom: 2rpx solid #d2d0cd;
			.Lu-phone-num{
				color: #333333;
				font-size: 30rpx;
			}
			.Lu-phone-number{
				font-size: 30rpx;
				color: #333333;
				margin-left: 40rpx;
			}
		}
		.Lu-phone-getcode{
			width: 570rpx;
			height: 100rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 30rpx;
			background-color: #89baeb;
			color: #fff;
			font-weight: 600;
			border-radius: 50rpx;
		}
		.Lu-phone-agree{
			color: #717171;
			font-size: 24rpx;
			margin-top: 48rpx;
			text-align: center;
		}
		.Lu-phone-footer{
			position: fixed;
			bottom: 10rpx;
			.Lu-phone-weixin{
				margin-top: 20rpx;
				text-align: center;
				.Lu-phone-weixinimg{
					width: 76rpx;
					height: 76rpx;
				}
				.Lu-phone-weixintit{
					font-size: 24rpx;
					color: #333333;
				}
			}
		}
	}
</style>
